أنماط تصميم جافا سكريبت: تطبيقات Singleton و Observer و Factory

أنماط التصميم هي حلول قابلة لإعادة الاستخدام للمشكلات الشائعة في تصميم البرمجيات. إنها تمثل أفضل الممارسات المكتسبة بمرور الوقت ويمكنها تحسين بنية تطبيقات جافا سكريبت الخاصة بك وقابليتها للصيانة والتوسع بشكل كبير. يستكشف هذا المقال ثلاثة من أنماط التصميم الأساسية: Singleton و Observer و Factory، مع تقديم تطبيقات عملية وأمثلة من الواقع.

فهم أنماط التصميم

قبل الخوض في أنماط محددة، من المهم أن نفهم سبب قيمة أنماط التصميم. فهي تقدم العديد من المزايا:

• إعادة الاستخدام: أنماط التصميم هي حلول مجربة ومختبرة يمكن تطبيقها على مشكلات مختلفة.
• قابلية الصيانة: اتباع الأنماط الراسخة يؤدي إلى كود أكثر تنظيمًا وقابلية للتنبؤ، مما يسهل فهمه وتعديله.
• قابلية التوسع: يمكن أن تساعدك أنماط التصميم في هيكلة تطبيقك بطريقة تسمح له بالنمو والتطور دون أن يصبح غير عملي.
• التواصل: يوفر استخدام أنماط التصميم مفردات مشتركة للمطورين، مما يسهل توصيل أفكار التصميم والتعاون بفعالية.

نمط Singleton (الفرد)

يضمن نمط Singleton أن يكون للفئة مثيل واحد فقط ويوفر نقطة وصول عامة إليه. يكون هذا مفيدًا عندما تحتاج إلى التحكم في إنشاء مورد معين والتأكد من استخدام مثيل واحد فقط في جميع أنحاء تطبيقك. فكر فيه ككائن تكوين عام أو مجمع اتصالات قاعدة بيانات.

التطبيق

إليك تطبيق أساسي لنمط Singleton في جافا سكريبت:

            
let instance = null;

class Singleton {
  constructor() {
    if (!instance) {
      instance = this;
    }
    return instance;
  }

  static getInstance() {
    if (!instance) {
      instance = new Singleton();
    }
    return instance;
  }

  // Add your methods and properties here
  getData() {
    return "Singleton data";
  }
}

// Example Usage
const singleton1 = Singleton.getInstance();
const singleton2 = Singleton.getInstance();

console.log(singleton1 === singleton2); // Output: true
console.log(singleton1.getData()); // Output: Singleton data

            

              
                Copy
              
            
          

الشرح:

• يحتفظ متغير `instance` بالمثيل الوحيد للفئة.
• يتحقق `constructor` مما إذا كان هناك مثيل موجود بالفعل. إذا كان موجودًا، فإنه يعيد المثيل الحالي؛ وإلا، فإنه ينشئ مثيلًا جديدًا.
• توفر دالة `getInstance()` نقطة وصول عامة إلى المثيل.

حالات الاستخدام في الواقع

• إدارة التكوين: يمكن لنمط Singleton تخزين إعدادات التكوين على مستوى التطبيق، مما يضمن وصولاً متسقًا عبر الوحدات المختلفة. تخيل تطبيقًا يحتاج إلى القراءة من ملف تكوين واحد ومتسق. يضمن Singleton قراءة الملف مرة واحدة فقط وأن جميع أجزاء التطبيق تستخدم نفس الإعدادات.
• التسجيل (Logging): يمكن لمسجل Singleton أن يركز جميع أنشطة التسجيل، مما يسهل تتبع وتحليل سلوك التطبيق. هذا يمنع وجود مثيلات متعددة من المسجل تكتب في نفس الملف في وقت واحد، مما قد يسبب تلف البيانات.
• مجمع اتصالات قاعدة البيانات: يمكن لنمط Singleton إدارة مجمع من اتصالات قاعدة البيانات، مما يحسن استخدام الموارد ويحسن الأداء. هذا يمنع العبء الزائد لإنشاء اتصالات جديدة لكل تفاعل مع قاعدة البيانات.

المزايا

• تحكم في الوصول إلى مثيل واحد.
• تحسين استخدام الموارد.
• نقطة وصول عامة.

العيوب

• يمكن أن يجعل الاختبار أكثر صعوبة بسبب الحالة العامة.
• ينتهك مبدأ المسؤولية الواحدة إذا كانت فئة Singleton تفعل أكثر من مجرد إدارة مثيلها الخاص.

نمط Observer (المراقب)

يُعرّف نمط Observer تبعية من واحد إلى متعدد بين الكائنات، بحيث عندما يغير كائن واحد (الموضوع) حالته، يتم إعلام جميع توابعه (المراقبين) وتحديثها تلقائيًا. هذا مفيد لبناء أنظمة ذات ارتباط ضعيف حيث يمكن للكائنات أن تتفاعل مع التغييرات في كائنات أخرى دون أن تكون مرتبطة بها بإحكام. فكر في شريط أسعار الأسهم الذي يقوم بتحديث جميع مشاهديه عند تغير سعر السهم.

التطبيق

إليك تطبيق لنمط Observer في جافا سكريبت:

            
class Subject {
  constructor() {
    this.observers = [];
  }

  subscribe(observer) {
    this.observers.push(observer);
  }

  unsubscribe(observer) {
    this.observers = this.observers.filter(obs => obs !== observer);
  }

  notify(data) {
    this.observers.forEach(observer => observer.update(data));
  }
}

class Observer {
  constructor(name) {
    this.name = name;
  }

  update(data) {
    console.log(`${this.name} received update: ${data}`);
  }
}

// Example Usage
const subject = new Subject();

const observer1 = new Observer("Observer 1");
const observer2 = new Observer("Observer 2");

subject.subscribe(observer1);
subject.subscribe(observer2);

subject.notify("New data available!");

subject.unsubscribe(observer2);

subject.notify("Another update!");

            

              
                Copy
              
            
          

الشرح:

• تحتفظ فئة `Subject` بقائمة من المراقبين.
• تضيف دالة `subscribe()` مراقبًا إلى القائمة.
• تزيل دالة `unsubscribe()` مراقبًا من القائمة.
• تتكرر دالة `notify()` عبر المراقبين وتستدعي دالة `update()` الخاصة بهم مع البيانات ذات الصلة.
• تُعرّف فئة `Observer` دالة `update()`، والتي يتم استدعاؤها عند تغير حالة الموضوع.

حالات الاستخدام في الواقع

• معالجة الأحداث: يُستخدم نمط Observer على نطاق واسع في أنظمة معالجة الأحداث، مثل أحداث المتصفح (مثل النقر، مرور الماوس) والأحداث المخصصة في تطبيقات الويب. نقرة الزر (الموضوع) تُعلم جميع مستمعي الأحداث المسجلين (المراقبين).
• التحديثات في الوقت الفعلي: في التطبيقات التي تتطلب تحديثات في الوقت الفعلي، مثل تطبيقات الدردشة أو مؤشرات الأسهم، يمكن استخدام نمط Observer لإعلام العملاء عند توفر بيانات جديدة. يقوم الخادم (الموضوع) بإعلام جميع العملاء المتصلين (المراقبين) عند استلام رسالة جديدة.
• نموذج-عرض-متحكم (MVC): في معماريات MVC، يُستخدم نمط Observer لإعلام العروض (Views) عند تغير النموذج (Model). يقوم النموذج (الموضوع) بإعلام العرض (المراقب) عند تحديث البيانات.

المزايا

• ارتباط ضعيف بين الموضوع والمراقبين.
• دعم الاتصال من نوع البث.
• علاقة ديناميكية بين الكائنات.

العيوب

• يمكن أن يؤدي إلى تحديثات غير متوقعة إذا لم تتم إدارته بعناية.
• صعوبة تتبع تدفق التحديثات.

نمط Factory (المصنع)

يوفر نمط Factory واجهة لإنشاء الكائنات في فئة عليا، ولكنه يسمح للفئات الفرعية بتغيير نوع الكائنات التي سيتم إنشاؤها. هذا يفصل كود العميل عن الفئات المحددة التي يتم إنشاؤها، مما يسهل التبديل بين التطبيقات المختلفة دون تعديل كود العميل. ضع في اعتبارك سيناريو تحتاج فيه إلى إنشاء أنواع مختلفة من المركبات (سيارات، شاحنات، دراجات نارية) بناءً على إدخال المستخدم.

التطبيق

إليك تطبيق لنمط Factory في جافا سكريبت:

            
// Abstract Product
class Vehicle {
  constructor(model, year) {
    this.model = model;
    this.year = year;
  }

  getDescription() {
    return `This is a ${this.model} made in ${this.year}.`;
  }
}

// Concrete Products
class Car extends Vehicle {
  constructor(model, year) {
    super(model, year);
    this.type = "Car";
  }
}

class Truck extends Vehicle {
  constructor(model, year) {
    super(model, year);
    this.type = "Truck";
  }
  getDescription() {
      return `This is a ${this.type} ${this.model} made in ${this.year}. It's very strong!`;
  }
}

class Motorcycle extends Vehicle {
  constructor(model, year) {
    super(model, year);
    this.type = "Motorcycle";
  }
}

// Factory
class VehicleFactory {
  createVehicle(type, model, year) {
    switch (type) {
      case "car":
        return new Car(model, year);
      case "truck":
        return new Truck(model, year);
      case "motorcycle":
        return new Motorcycle(model, year);
      default:
        return null;
    }
  }
}

// Example Usage
const factory = new VehicleFactory();

const car = factory.createVehicle("car", "Toyota Camry", 2023);
const truck = factory.createVehicle("truck", "Ford F-150", 2022);
const motorcycle = factory.createVehicle("motorcycle", "Honda CBR", 2024);

console.log(car.getDescription()); // Output: This is a Toyota Camry made in 2023.
console.log(truck.getDescription()); // Output: This is a Truck Ford F-150 made in 2022. It's very strong!
console.log(motorcycle.getDescription()); // Output: This is a Honda CBR made in 2024.

            

              
                Copy
              
            
          

الشرح:

• فئة `Vehicle` هي منتج مجرد يحدد الواجهة المشتركة لجميع أنواع المركبات.
• فئات `Car` و `Truck` و `Motorcycle` هي منتجات ملموسة تطبق واجهة `Vehicle`.
• فئة `VehicleFactory` هي المصنع الذي ينشئ مثيلات للمنتجات الملموسة بناءً على النوع المحدد.
• تأخذ دالة `createVehicle()` النوع والطراز والسنة كوسائط وتعيد مثيلاً لفئة المركبة المقابلة.

حالات الاستخدام في الواقع

• أطر عمل واجهة المستخدم: غالبًا ما تستخدم أطر عمل واجهة المستخدم نمط Factory لإنشاء أنواع مختلفة من عناصر واجهة المستخدم، مثل الأزرار وحقول النص والقوائم المنسدلة. غالبًا ما تستخدم مكتبات مكونات React و Vue و Angular أنماطًا شبيهة بالمصنع لإنشاء المكونات.
• تطوير الألعاب: في تطوير الألعاب، يمكن استخدام نمط Factory لإنشاء أنواع مختلفة من كائنات اللعبة، مثل الأعداء والأسلحة والتعزيزات. يمكن استخدام المصنع لإنشاء أنواع مختلفة من خصوم الذكاء الاصطناعي بناءً على مستوى صعوبة اللعبة.
• طبقات الوصول إلى البيانات: يمكن استخدام نمط Factory لإنشاء أنواع مختلفة من كائنات الوصول إلى البيانات، مثل اتصالات قاعدة البيانات وعملاء API. يمكن استخدام المصنع لإنشاء اتصالات بأنظمة قواعد بيانات مختلفة (مثل MySQL، PostgreSQL، MongoDB).

المزايا

• فصل كود العميل عن الفئات الملموسة.
• تحسين تنظيم الكود وقابلية الصيانة.
• المرونة في التبديل بين التطبيقات المختلفة.

العيوب

• يمكن أن يضيف تعقيدًا إلى قاعدة الكود.
• قد يتطلب المزيد من الإعداد الأولي.

الخاتمة

أنماط Singleton و Observer و Factory ليست سوى عدد قليل من أنماط التصميم العديدة المتاحة لمطوري جافا سكريبت. من خلال فهم هذه الأنماط وتطبيقها، يمكنك كتابة كود أكثر نظافة وقابلية للصيانة والتوسع. جرب هذه الأنماط في مشاريعك الخاصة واستكشف أنماط تصميم أخرى لتعزيز مهاراتك في تطوير البرمجيات. تذكر أن أنماط التصميم هي أدوات يجب استخدامها بحكمة، وليست كل مشكلة تتطلب حلاً بنمط تصميم. اختر النمط المناسب للموقف المناسب، واسعَ دائمًا لكتابة كود واضح وموجز وسهل الفهم.

إن التعلم المستمر وتكييف أنماط التصميم في سير عملك التطويري سيرفع بشكل كبير من جودة الكود الخاص بك وقدرتك على مواجهة تحديات البرمجيات المعقدة في أي مشروع عالمي.